<template>
    <div class="file-upload-box">
        <div class="file-upload-title">
            <div class="title-left" :key="isAllFinish">
                <svg class="icon" v-if="isAllFinish">
                    <use xlink:href="#keowledge-zhengque"></use>
                </svg>
                <img class="icon" :src="uploadLoading" v-if="!isAllFinish">
                <span>{{ isAllFinish ? $t('message.text.uploadFinish') : $t('message.text.uploading') }}</span>
                <span>{{ getFinishNum }}/{{ getList.length }}</span>
            </div>
            <div class="title-right">
                <svg class="icon" @click="isCloseOpen = !isCloseOpen">
                    <use v-bind:xlink:href="`#${isCloseOpen ? 'keowledge-shouqi1' : 'keowledge-zhankai'}`"></use>
                </svg>
                <svg class="icon" :class="[!isAllFinish && 'button-disable']" @click="closeFileUpload">
                    <use v-bind:xlink:href="`#${!isAllFinish ? 'keowledge-guanbi-jinyong' : 'keowledge-danchuangguanbi1'}`">
                    </use>
                </svg>
            </div>
        </div>
        <el-scrollbar max-height="270px">
            <div class="file-upload-body" :class="[!isCloseOpen && 'file-upload-body-open']">
                <div class="file-items">
                    <div class="file-item" v-for="(item, index) in getList" :key="index">
                        <div class="file-item-content">
                            <div class="left">
                                <svg class="file-icon">
                                    <use v-bind:xlink:href="`${getIcon(item.type, item.nameSuffix)}`"></use>
                                </svg>
                                <div class="name">{{ item.fileName }}</div>
                            </div>
                            <div class="right">
                                <span v-if="!item.isFinish">{{ $t('message.text.importing') }}{{ item.percentage }}%</span>
                                <template v-else>
                                    <span :class="[!item.isfail && 'success', item.isfail && 'fail']"
                                        @click="oepnFile(item)">{{ item.isfail ? '上传失败' : '立即打开' }}</span>
                                    <svg class="success-icon">
                                        <use
                                            v-bind:xlink:href="`#${item.isfail ? 'keowledge-cuowu' : 'keowledge-zhengque'}`">
                                        </use>
                                    </svg>
                                </template>
                            </div>
                        </div>
                        <div class="file-progress" v-if="!item.isFinish">
                            <!-- :indeterminate="true" -->
                            <el-progress :percentage="item.percentage" :show-text="false" :stroke-width="3" striped
                                striped-flow />
                        </div>
                    </div>
                </div>

            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    watchEffect,
    computed,
    onMounted,
    getCurrentInstance,
    onBeforeUnmount
} from 'vue'

import { useRouter, useRoute } from "vue-router"
import { require } from '@/utils/require'
import uploadLoading from '@/assets/images/upload_loading.gif'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance()
const emit = defineEmits([""])
const props = defineProps({
    fileList: {
        type: Array,
        default: []
    },
    remove: Function,
    parentId: {
        type: String,
        default: ''
    }
})
//const { } = toRefs(props);

const isCloseOpen = ref(false)
const fileList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
import useCommonStore from '@/store/common.js'
import { indexOf } from 'lodash';
const commonStore = useCommonStore()

const { data } = toRefs(
    reactive({
        //定义数组和对象
        data: "",
    })
);
const newParentId = ref('')
onMounted(() => {
    // 通信
    proxy.$eventBus.$on('fileList', getFileList)
    newParentId.value = props.parentId
})
onBeforeUnmount(() => {
    proxy.$eventBus.$off('fileList', getFileList)
})
const getList = computed(() => {
    return commonStore.fileList
})
const getFinishNum = computed(() => {
    let num = 0
    getList.value.forEach((item => {
        if (item.isFinish && !item.isfail) {
            num += 1
        }
    }))
    return num
})
const isAllFinish = computed(() => {
    let num = 0
    getList.value.forEach((item => {
        if (item.isFinish) {
            num += 1
        }
    }))
    return num >= getList.value.length
})
watch(isAllFinish, (newV) => {
    if (newV) {
        proxy.$eventBus.$emit('uploadrefreshTree', getList.value)
        proxy.$eventBus.$emit('clearUploadFinish', getList.value)
    }
})
function getFileList(files) {
    fileList.value = files
}
function closeFileUpload() {
    if (!isAllFinish.value) return
    commonStore.setUploadFileList([])
    if (props.remove) props.remove()
    proxy.$eventBus.$emit('clearFileLsit')
    // proxy.$eventBus.$on('fileList',getFileList)
}
function oepnFile(item) {
    if (!item.isfail) {
        if (route.path.indexOf('/knowledge/') != -1) {
            if (route.params.id == item.knowledgeId) {
                router.push({
                    path: route.path,
                    query: {
                        docId: item.docId
                    }
                })
            } else {
                router.push({
                    path: '/knowledge/all/' + item.knowledgeId,
                    query: {
                        docId: item.docId
                    }
                })
            }
        } else {
            router.push({
                path: '/knowledge/all/' + item.knowledgeId,
                query: {
                    docId: item.docId
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.file-upload-box {
    position: fixed;
    z-index: 2010;
    right: 24px;
    bottom: 24px;
    width: 500px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 2px 6px 0px rgba(54, 59, 76, 0.1);
    border: 1px solid #EEEFF0;
    transition: all 0.5s;

    .file-upload-title {
        height: 56px;
        border-bottom: 1px solid #eeeff0;
        display: flex;
        align-items: center;
        padding: 0px 24px;
        justify-content: space-between;

        .title-left {
            font-size: 14px;
            color: #363b4c;
            display: flex;
            align-items: center;
            @include SourceHanSansCN-Bold;

            span {
                margin-left: 10px;
            }

            .icon {
                width: 24px;
                height: 24px;
            }
        }

        .title-right {
            display: flex;
            align-items: center;

            .icon {
                width: 16px;
                height: 16px;
                cursor: pointer;

            }

            .icon+.icon {
                margin-left: 16px;
            }
        }
    }

    .file-upload-body {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: all 0.5s;

        .file-items {
            padding: 0px 24px;
            overflow: hidden;

            .file-item {
                height: 52px;
                border-bottom: 1px solid #eeeff0;
                position: relative;
                display: flex;
                align-items: center;

                .file-item-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left {
                        display: flex;

                        .file-icon {
                            width: 20px;
                            height: 20px;
                            min-width: 20px;
                            margin-right: 16px;
                        }

                        .name {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 310px;
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;
                        justify-content: end;
                        min-width: 110px;
                        width: 110px;
                        @include SourceHanSansCN-Regular;
                        font-size: 14px;
                        color: #6F7588;

                        .success {
                            color: #1E6FFF;
                            cursor: pointer;
                        }

                        .fail {
                            color: #FF194C;
                        }

                        .success-icon {
                            width: 16px;
                            height: 16px;
                            margin-left: 8px;
                        }
                    }
                }

                .file-progress {
                    position: absolute;
                    bottom: 0px;
                    width: 100%;
                }
            }

        }
    }

    .file-upload-body-open {
        grid-template-rows: 1fr;
    }
}

.button-disable {
    cursor: no-drop !important;
}
</style>